@charset "utf-8";
/* CSS Document */
/* index */ 
.swiper-container{
    position: relative;
    height: 100%;
    .swiper-slide{
        position: relative;
    }
    .arrow-left {
        background: url(../img/arrow.png) no-repeat;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -24px;
        width: 47px;
        height: 47px;
        z-index: 10;
    }
    .arrow-right {
        background: url(../img/right.png) no-repeat;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -24px;
        width: 47px;
        height: 47px;
        z-index: 10;
    }
    .swiper-pagination {
        position: absolute;
        z-index: 20;
        bottom: 10px;
        width: 100%;
        text-align: center;
      }
      .swiper-pagination-switch {
        display: inline-block;
        width: 28px;
        height: 6px;
        border-radius: 0;
        background-color: #fffafc;
        margin: 0 4px;
        cursor: pointer;
      }
      .swiper-active-switch {
        background-color: #028a1b;
        opacity: 1;
      }
    
    
    .banner-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

.page1,.page2,.page3,.page4{
    height: 100%;
    
}
.page1{
    .banner-p{
        position: absolute;
        height: 208px;
        top: 50%;
        left: 15%;
        margin-top: -104px;
        max-width: 600px;
        p{
            font-weight: bold;
            font-size: 40px;
            color: #ffffff;
        }
        .more-link{margin-top: 30px;}
        .more{font-size: 24px;color: #ffffff;margin-right: 16px;}
    }
    .btn-box{
        position: absolute;
        display: none;
        bottom: 40px;
        left: 5%;
        right: 5%;
        text-align: center;
        font-size: 0;
        .btnbg{
            max-width: 335px;
            width: 48%;
            margin: 0 1%;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            .btnimg{
                width: 40px;
                margin: 30px 0;
            }
            span{
                font-size: 20px;
                vertical-align: middle;
                color: #fff;
                margin-left: 5%;
            }
        }
    }
}

.page2{
    .swiper-container{
        height: 80%;
    }
    .x-slide{
        height: 20%;
        width: 80%;
        margin: auto;
        position: relative;
        .banner-bg{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
        }
        .thumbs-box{
            margin: 20px 3%;
            height: 128px;
            padding: 8px;
            .thumbs-img{
                float: left;
                width: 138px;
                height: 112px;
            }
            .thumbs-desc{
                margin-left: 145px;
                padding: 10px;
                height: 100%;
               .con{
                    font-size: 14px;
                    overflow: hidden;
                    height: 60px;
                    line-height: 20px;
                }
                h3{
                    color: #328138;
                    margin-bottom: 10px;
                }
            }
        }
        .swiper-slide-thumb-active{
           .thumbs-box{
               background-color: #fcf5d9;
           } 
            
        }
        .swiper-slide{
            opacity: 0;
            transition: all 0.5s ease 0.3s;
            transform: translateX(50px);
        }
    }
    .banner-p{
        position: absolute;
        min-height: 208px;
        max-width: 600px;
        top: 50%;
        left: 15%;
        margin-top: -104px;
        h2,h3,p{color:#fff}
        h2{
            font-size: 32px; 
        }
        h3{
            font-size: 24px;
            font-weight: normal;
            margin-bottom: 5%;
        }
        p{
            font-size: 16px;
            line-height: 36px;
        }
        .more-link{margin-top: 2%;}
        .more{font-size: 24px;color: #ffffff;margin-right: 16px;}
    }
    .swiper-slide-active{
        .thumbs-box{
            	background-color: #f6f1e3;
        }
    }
}
.active{
    .page2{
        .x-slide{
             .swiper-slide{
                transform: translateX(0px);
                transition: all 0.5s ease 0.3s;
                opacity: 1;
                &:nth-child(2){
                    transition-delay: 0.5s;
                }
                &:nth-child(3) {
                    transition-delay: 0.7s;
                }
                &:nth-child(4) {
                    transition-delay: 0.9s;
                }
            }
        }
    }
}
.page3{
     .banner-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .page-content{
        position: absolute;
        top: 25%;
        width: 100%;
        padding: 0 15%;
        h2{
            font-size: 32px;
            line-height: 36px;
            color: #028a1b;
            .more-link{
                float: right;
                .more{font-size: 24px;color: #ffffff;margin-right: 16px;}
            }
        }
        p.our-products {
            height: 23px;
            font-size: 28px;
            line-height: 36px;
            color: #6dba32;
        }
        .product-list{
            margin-top: 5%;
            li{
                width: 31%;
                margin-right: 2%;
                margin-bottom: 2%;
                float: left;
                opacity: 0;
                transform: scale(0.7);
                transition: all 0.5s ease;
                .pic{
                    position: relative;
                    text-align: center;
                    .inner{
                        position: absolute;
                        top: 50%;
                        height: 130px;
                        margin-top: -65px;
                        left: 0;
                        width: 100%;
                        text-align: center;
                        color: #ffffff;
                        font-size: 18px;
                        img{
                            height: 60px;
                            margin-bottom: 20px;
                        }
                    }
                }
            }

        }
    }
}
.active{
    .page3{
         .product-list{
             li{
                 opacity: 1;
                transform: scale(1);
                transition: all 0.5s ease 0.3s;
                &:nth-child(2){
                    transition-delay: 0.5s;
                }
                &:nth-child(3) {
                    transition-delay: 0.7s;
                }
                &:nth-child(4) {
                    transition-delay: 0.9s;
                }
                &:nth-child(5) {
                    transition-delay: 1.1s;
                }
                &:nth-child(6) {
                    transition-delay: 1.3s;
                }
             }
        }
    }
}
.page4{
    .banner-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .page-content{
        position: absolute;
        top: 25%;
        width: 100%;
        padding: 0 15%;
        h2{
            font-size: 32px;
            line-height: 36px;
            color: #028a1b;
            .more-link{
                float: right;
                .more{font-size: 24px;color: #6dba32;margin-right: 16px;}
            }
        }
        p.our-products {
            height: 23px;
            font-size: 28px;
            line-height: 36px;
            color: #6dba32;
        }
        .list-box{
            margin-top: 5%;
            .swiper-box{
                width: 48%;
                margin-right: 2%;
                height: 454px;
                .desc-link{
                    position: absolute;
                    bottom: 10px;
                    left: 3%;
                    z-index: 100;
                    p,div{
                        color: #ffffff;
                        font-size: 18px;
                    }
                }
            }
            .news-list{ 
                width: 50%;
                li{
                        height: 151px;
                        overflow: hidden;
                        background: #fff;
                        transform: translateY(50%);
                        opacity: 0;
                        transition: all 0.5s ease;
                        padding: 2% 3%;
                        color: #969696;
                        border-bottom: 1px solid rgba(229, 229, 229, 0.5);
                        .cover{
                            float: left;
                            img{
                                width: 180px;
	                            height: 112px;
                            }
                        }
                        .detail{
                            margin-left: 190px;
                        }
                        p{
                            color: #323232;
                            font-size: 18px;
                            height: 30px;
                            line-height: 30px;
                            overflow: hidden;
                            margin-bottom: 20px;
                            &:hover{
                                color: #068f1f;
                            }
                        }
                        .time{
                            font-size: 14px;
                            margin-bottom: 8px;
                        }
                        .content{
                            font-size: 16px;
                            height: 40px;
                            overflow: hidden;
                            color: #969696;
                        }
                }
            }
        }
    }
    .swiper-container{
        .swiper-pagination-switch {
            width: 25px;
        }
    }
    .swiper-pagination{
        text-align: right;
        padding-right: 3%;
    }
}
.active4{
    .page4{
       .page-content{
           .news-list{
               li {
                    transform: translateY(0%);
                    opacity: 1;
                    transition: all 0.5s ease 0.3s;
                    &:nth-child(2n){
                        transition-delay: 0.5s;
                    }
                    &:nth-child(3n){
                        transition-delay: 0.7s;
                    }
                }
           }
       } 
    }
   
}

@media (max-width: 1400px){
    .page2{
        
        .x-slide{
            width: 100%;
        }
    }
    .page4{
    .page-content{
        .list-box{
            margin-top: 5%;
            .swiper-box{
                width: 48%;
                margin-right: 2%;
                height: 360px;
                .desc-link{
                    position: absolute;
                    bottom: 10px;
                    left: 3%;
                    z-index: 100;
                    p,div{
                        color: #ffffff;
                        font-size: 18px;
                    }
                }
            }
            .news-list{ 
                width: 50%;
                li{
                        height: 120px;
                        .cover{
                            float: left;
                            img{
                                width: 150px;
                                height: 100px;
                            }
                        }
                        .detail{
                            margin-left: 160px;
                        }
                        p{
                            color: #323232;
                            font-size: 18px;
                            height: 30px;
                            line-height: 30px;
                            overflow: hidden;
                            margin-bottom: 0px;
                            &:hover{
                                color: #068f1f;
                            }
                        }
                        .time{
                            font-size: 14px;
                            margin-bottom: 8px;
                        }
                        .content{
                            font-size: 16px;
                            height: 40px;
                            overflow: hidden;
                        }
                }
            }
        }
    }
    .swiper-pagination{
        text-align: right;
        padding-right: 3%;
    }
}
}
@media (max-width: 1680px){
    .page2{
        
        .x-slide{
            width: 100%;
        }
    }
}


@media (max-width: 1200px){
    .swiper-container{
        .arrow-right,.arrow-left{
        display: none;
        }
        .swiper-pagination-switch {
            width: 33px;
            height: 6px;
            opacity: 1;
        }
    }
    .swiper-box{
        .swiper-container{
            .arrow-right,.arrow-left{
            display: block;
            width: 30px;
            height: 30px;
            margin-top: -15px;
            background-position: center
            }
        }
    }
.page1{
    .banner-p {
        right: 15%;
        p{
            font-size: 20px;
            line-height: 26px;
        }
        .more{font-size: 16px;}
        .jiantou{height: 16px;}
    }
    .btn-box{
        display: block;
    }
    .swiper-pagination{
        bottom: 160px;
    }
}


.page2{
    .banner-p {
        top: 0;
        margin-top: 100px;
        left: 5%;
        right: 5%;
        h2{
            font-size: 24px;
        }
        h3{
            font-size: 18px;
        }
        p{
            font-size: 16px;
            line-height: 26px;
        }
        .more-link{
            margin-top: 5%;
        }
        .more{font-size: 16px;font-weight: 600;}
        .jiantou{height: 16px;}
    }
    .x-slide{
        // width: 400%;
        // .swiper-slide{width: 80%;}
        .thumbs-box{
            // margin: 5%;
            margin: 10px 10px 0 0;
            padding: 0;
            height: 80%;
            .thumbs-img{
                height: 100%;
                width: 40%;
            }
            .thumbs-desc{
                margin-left: 40%;
                padding-top: 2%;
            }
        }
    }
}
.page3 {
    .page-content{
        top: 0;
        margin-top: 100px;
        left: 5%;
        right: 5%;
        padding: 0;
        width: inherit;
        bottom: 0;
        h2{
            font-size: 24px;
            .more{font-size: 16px !important;margin-right: 8px !important;}
            .jiantou{height: 16px;}
        }
        p.our-products {
            font-size: 18px;
        }
        .product-list{
            position: absolute;
            bottom: 25px;
            margin: inherit;
            li{
               width: 48%; 
               &:nth-child(2n){
                   margin-right: 0;
                   margin-left: 2%;
               }
               .pic{
                   img{
                       height: 130px;
                   }
                   .inner{
                       font-size: 14px;
                       height: 90px;
                       margin-top: -45px;
                       img{
                           height: 40px;
                           margin-bottom: 10px;
                       }
                   }
               }
            }
        }
    }
    .banner-bg{
        background-position: right center;
    }
}
.page4{
    .page-content{
        top: 0;
        margin-top: 100px;
        left: 5%;
        right: 5%;
        padding: 0;
        width: inherit;
        bottom: 0;
        h2{
            font-size: 24px;
            .more{font-size: 16px !important;margin-right: 8px !important;}
            .jiantou{height: 16px;}
        }
        p.our-products {
            font-size: 18px;
        }
        .list-box{
            .swiper-box {
                width: 100%;
                height: 200px;
                .desc-link{
                    bottom: 30px;
                }
            }
            .news-list{
                width: 100%;
                li{
                    height: auto;
                    .cover{
                        float: none;
                        display: inline-block;
                        width: 30%;
                        img{
                            height: auto;
                            width: 100%;
                        }
                    }
                    .detail{
                        margin-left: 2%;
                        width: 62%;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    p{
                        font-size: 16px;
                        height: 24px;
                        line-height: 24px;
                        margin-bottom:0px;
                    }
                    .time{font-size: 12px;
                        margin-bottom: 8px;
                    }
                    .content{
                        font-size: 14px;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                    }
                }
            }
        }
    }
    .swiper-pagination{
        text-align: center;
        padding: 0;
    }
}
}





